import React, { Component } from 'react';
import {
	ScrollView, StyleSheet, Text, View, TouchableOpacity, Image, Modal, PixelRatio, Dimensions
} from "react-native";
import { GLOBAL } from '../../../../../config/global';
import HTTP from '../../../../../utils/http';
import { API, API_GENERATE } from '../../../../../config/api';
import ModalPicsComponent from '../_components/ModalPicsComponent';
import { Common } from '../../../../../component/common/Common';
import { style } from '../../../../../theme/style';

const scale = GLOBAL.SCALE;
const closeImg = require('../../../../../imgs/close.png')
const modalPicDelCfg = {
	visible: false,
	urls: [],
	picPress: () => { },
}
export class ImgPreviewPage extends Component {
	static navigationOptions = ({ navigation }) => {
		return {
			headerTitle: '附件查看',
			headerTintColor: style.color.white,
			headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#fff' />,
			headerRight: (<Image style={{ marginLeft: 18 * scale, width: 9 * scale, height: 16 * scale }} source={closeImg} />),
			headerStyle: style.head.headerStyle,
			headerTitleStyle: {
				flex: 1,
				textAlign: 'center',
			}
		}
	};

	constructor(props) {
		super(props);
		this.state = {
			previewModalVisible: false
		}
	}

	async	_getImgPreview (fileId) {
		const response = await HTTP.GET(API_GENERATE(API.GET_IMG_VIEW), { fileId });
		if (response && response.image && response.image.length) {
			modalPicDelCfg.visible = true;
			modalPicDelCfg.urls[0] = {
				url: response.image,
				width: Dimensions.get('window').width
			};
			modalPicDelCfg.picPress = () => {
				modalPicDelCfg.visible = false;
				modalPicDelCfg.urls = [];
				this.setState({
					previewModalVisible: false,
				});
			}
		}
	}

	render () {
		let { fileAddress } = this.props.navigation.state.params;
		let fileAddressArr = fileAddress.split(',');
		return (
			<View>
				{
					fileAddressArr.map((item, index) => {
						return (
							<Text style={{ padding: 14 * scale, color: style.color.themeColor }} onPress={() => this._getImgPreview(item)}>【查看附件】</Text>
						)
					})
				}
				<ModalPicsComponent {...modalPicDelCfg} />
			</View>
		)
	}
}

const styles = StyleSheet.create({

})
